<template>
  <view class="goods-detail" v-if="info.sessionId">
    <view class="detail-header">
      <view class="header-rule" @click="$refs.rule.open()">规则</view>
      <uni-popup ref="rule" type="center">
        <rule-modal @on-close="$refs.rule.close()"></rule-modal>
      </uni-popup>
      <image :src="info.goodsDetailImg" mode="widthFix"></image>
      <view class="header-main" v-if="info.detailState == 0">
        <h2>{{info.goodsDesc}}·{{info.goodsName}} <span>限量{{info.totalNum}}件</span></h2>
        <view class="main-info">
          抽奖码剩余 
          <step-bar style="flex: 1; margin: 0 40rpx 0 30rpx;" :percent="info.remainingRate | percent"></step-bar>
        </view>
        <view class="main-footer">
          <span>开奖时间{{info.lotteryTime}}</span>
          <!-- <image src="@/static/开奖提醒.png" @click="$refs.remind.open()" mode="widthFix"></image> -->
        </view>
        <view style="margin-top: 10rpxpx; font-weight: bold;color: #666;">开奖前<strong style="color: #f00;">10分钟</strong>截止参与</view>
        <uni-popup ref="remind" type="center">
          <view class="popup-remind">
            <image @click="$refs.remind.close()" src="@/static/关闭.png" mode="widthFix"></image>
            <view class="remind-main">
              <h2>担心错过抽签结果公布？ <br> 快开启提醒吧~</h2>
              <button>开启提醒</button>
            </view>
          </view>
        </uni-popup>
      </view>
      <view class="header-main header-award" v-else>
        <view class="award-info">
          <h2>{{info.goodsDesc}}·{{info.goodsName}}</h2>
          <strong>开奖时间{{info.lotteryTime}} <span>限量{{info.totalNum}}件</span></strong>
        </view>
        <block v-if="info.detailState == 1 || info.detailState == 2">
          <image v-if="info.detailState == 1" class="award-status" src="@/static/未参与.png" mode="widthFix"></image>
          <image v-else class="award-status" src="@/static/未中奖.png" mode="widthFix"></image>
          <button @click="handleToHome()">参与最新抽奖 &gt;</button>
        </block>
        
        <block v-if="info.detailState == 3">
          <image class="award-status" src="@/static/已中奖.png" mode="widthFix"></image>
          <button @click="handleReceive()">领取奖品 &gt;</button>
        </block>
      </view>
    </view>
    
    <view class="detail-body">
      <view class="body-main">
        <block v-if="info.detailState == 0">
          <h2>积分兑抽奖码（{{info.scoreTreasureCodeNums}}/4） <span>我的积分：{{info.totalDxScore}}</span> <strong @click="$refs.integral.open()">赚积分</strong></h2>
          <uni-popup ref="integral" type="bottom">
            <view class="popup-integral">
              <image class="integral-close" src="@/static/关闭.png" mode="widthFix" @click="$refs.integral.close()"></image>
              <view class="integral-head">
                <image class="head-img" src="@/static/积分.png" mode="widthFix"></image>
                <view class="head-title">
                  <h2>做任务赚积分</h2>
                  <span>积分可兑抽奖码</span>
                </view>
                <view class="head-info">
                  <image src="@/static/我的积分.png" mode="widthFix"></image>
                  {{info.totalDxScore}}
                </view>
              </view>
              <view class="integral-main">
                <view class="main-list" v-for="item in messionList" :key="item.taskId">
                  <image :src="item.taskImg" mode="widthFix"></image>
                  <view class="list-title">
                    <h3>{{item.taskName}}</h3>
                    <span>{{item.taskDesc}}</span>
                  </view>
                  <button @click="handleMession(item)" :class="item.isFinish=='1'?'success':''">{{item.isFinish=='0'?'未完成':'已完成'}}</button>
                </view>
              </view>
            </view>
          </uni-popup>
          <view class="main-info">
            <view class="info-title">
              <strong>{{info.pointValue}}积分</strong>/码 
              <view>最多可兑4个抽奖码</view>
            </view>
            <view class="info-step">
              <uni-number-box :min="1" :max="4-info.scoreTreasureCodeNums" v-model="stepVal" />
            </view>
            <button :class="info.scoreTreasureCodeNums < 4?'':'disabled'" @click="handleExchange">兑换</button>
          </view>
          
          <uni-popup ref="draw" type="center">
            <draw-code :code="code" @on:CLOSE='$refs.draw.close();stepVal = 0' type="detail"></draw-code>
          </uni-popup>
          
          <uni-popup ref="exchange" type="center">
            <view class="popup-remind">
              <image @click="$refs.exchange.close()" src="@/static/关闭.png" mode="widthFix"></image>
              <view class="remind-main">
                <h2>积分不足 <br> 快去赚积分兑换抽奖码吧！</h2>
                <h6>抽奖码越多，中奖率越高</h6>
                <button @click="$refs.exchange.close();$refs.integral.open()">马上赚积分</button>
              </view>
            </view>
          </uni-popup>
        <h2>助力获抽奖码（{{assistList.length}}/5）</h2>
          <button v-show="assistList.length < 5" class="main-more" @click="$refs.share.open()">好友助力领更多抽奖码 &gt;</button>
          <view class="main-list">
            <view class="list-item" v-for="(item) in assistList" :key="item.time">
              <view class="item-img">
                <image src="@/static/头像.png" mode="widthFix"></image>
              </view>
              <span class="dot">尾号{{item.phone}}</span>
            </view>
          </view>
          <uni-popup ref="share" type="bottom">
            <share-modal @on-share="handleShare" @on-close="$refs.share.close()"></share-modal>
          </uni-popup>
        </block>
      
        <h2>我的抽奖码（{{codeNum}}/10） <span>抽奖码越多，中奖率越大</span> </h2>
        <view class="main-mine">
          <view v-for="(item,index) in codeList" :key="index" class="mine-item" :class="item.treasureCode?item.isLucky == '1'?'reward':'':'not'">{{item.treasureCode}}</view>
        </view>
          
        <block v-if="info.detailState != 0">
          <view class="main-award" v-if="recordList.length">
            <h2>中奖用户（{{recordList.length}}）</h2>
            <view class="award-user" v-for="item in recordList" :key="item.treasureCode">
              <image src="@/static/头像.png" mode="widthFix"></image>
              <span>{{item.userPhone}}</span>
              <strong>{{item.treasureCode}}</strong>
            </view>
          </view>
        </block>
      </view>
      
      <view class="body-adsense" @click="handleAdvert">
        <image src="@/static/广告位.jpg" mode="widthFix"></image>
      </view>
      
    </view>
    
    <uni-popup ref="getIntegral" type="center">
      <view class="integral-popup">
        <image class="main-close" src="@/static/关闭.png" mode="widthFix" @click="$refs.getIntegral.close()"></image>
        <image style="display: block;" src="@/static/500积分.png" mode="widthFix"></image>
        <view style="padding: 20rpx; background: #fff;">
          <view class="main-info">
            <yi-line>恭喜您获得</yi-line>
            <h2>送你500定向积分</h2>
            <span>一起参与夺宝、赢手机、会员等大奖</span>
            <button @click="handleNewUser()">马上去赢大奖 &gt;</button>
          </view>
        </view>
      </view>
    </uni-popup>
    
    <view class="detail-fix" @click="handleToHome('again')">
      <image src="@/static/继续夺宝.gif" mode="widthFix"></image>
    </view>
  </view>
</template>

<script>
  import stepBar from '@/components/step-bar.vue'
  import DrawCode from '@/components/popup-draw-code.vue'
  const yiLine = ()=>import('@/components/yi-line/yi-line')
  const RuleModal = ()=>import('@/components/rules.vue')
  const shareModal = ()=>import('@/components/share.vue')
  
  import {throttle,getUrlParam} from '@/utils/Tools.js'
  export default {
    components:{stepBar,DrawCode,yiLine,RuleModal,shareModal},
    data() {
      return {
        stepVal:0,
        info:{},
        code:[],
        codeList:[],
        codeNum:0,
        recordList:[],
        assistList:[],
        messionList:[]
      };
    },
    filters:{
      percent(data){
        return data?data.replace('%',''):0
      }
    },
    onLoad(ops){
      this._getInfo(ops.id)
      const headers = {
        sign: this.$sign
      }
      //   是否为新用户
      this.$get(`/code/giveFreePoints?userPhone=${this.$mobile}&sessionId=${ops.id}`,'','',headers).then(res=>{
        if(res.code == 200){
          setTimeout(_=>{
            this.$refs.getIntegral.open()
          },1000)
        }
      })
      this.handleExchange = throttle(this.handleExchange,2000)
      this._getMessionList()
      this.$get(`/code/fissionShow?sessionId=${ops.id}&userPhone=${this.$mobile}`,'','',headers).then(res=>{
        if(res.code == 200){
          this.assistList = res.data.fissionVos
        }
      })
      
      setTimeout(_=>{
        this.$point({
          action_code:"960000002",//对照表填 必须传
          action_type:"enter",//对照表填 必须传
          params: [{
            k: "active_id",  //必须传
            v: "jfdb",
          },
          {
            k: "user_phone", //必须传
            v: this.$mobile,
          },
          {
            k: "user_ip",  // 必须传
            v: this.$ip,
          },
          {
            k: "session_id",  // 必须传
            v: ops.id
          }],
        })
      },2000)
    },
    methods:{
      async handleExchange(){  //  点击了兑换
        if(this.info.totalDxScore < this.info.pointValue){
          this.$refs.exchange.open()
          return;
        }
        if(this.stepVal < 1){
          this.$toast('至少兑换一个抽奖码')
          return;
        }
        if(this.info.scoreTreasureCodeNums < 4){
          const headers = {
            sign: this.$sign,
            token: this.$token
          }
          uni.showLoading({
            title:'加载中...'
          })
          const res = await this.$get(`/code/exchangeTreasureCode?userPhone=${this.$mobile}&sessionId=${this.info.sessionId}&exchangeNum=${this.stepVal}`,'',1,headers)
          if(res.code == 200){
            this.code = res.data.codeList
            this._getInfo(this.info.sessionId)
            this.$refs.draw.open()
          }else{
            this.$toast(res.msg)
          }
          
          this.$point({
            action_code:"960000006",//对照表填 必须传
            action_type:"click",//对照表填 必须传
            params: [{
              k: "active_id",  //必须传
              v: "jfdb",
            },
            {
              k: "user_phone", //必须传
              v: this.$mobile,
            },
            {
              k: "user_ip",  // 必须传
              v: this.$ip,
            },
            {
              k: "session_id",  // 必须传
              v: this.info.sessionId
            }],
          })
        }
      },
      async handleShare(e){   //  确认分享
        uni.showLoading({
          title:'加载中'
        })
        const headers = {
          sign: this.$sign
        }
        const res = await this.$get(`/code/fissionShareCode?userPhone=${this.$mobile}&sessionId=${this.info.sessionId}`,'',1,headers)
        if(res.code == 200){
          const {goodsDesc,goodsName,goodsPrice} = this.info
          ms.shareSingleChannel({
            shareStyle:"webpage",
            shareChannel:[e],
            shareTitle: `赢价值￥${goodsPrice}${goodsDesc}${goodsName}`,
            shareContent: "还有哈根达斯、肯德基代金券，视频会员等好礼",
            shareIconURL: this.info.goodsDetailImg,
            shareURL: `https://img.client.10010.com/dwguide/index.html?actCode=40469&openUrl=https://m.client.10010.com/mobileService/openPlatform/openPlatLinePro.htm?to_url=${this.BASE_URL}/login?share=${res.data.fissionShareCode}`
          });
          this.$point({
            action_code:"960000011",//对照表填 必须传
            action_type:"click",//对照表填 必须传
            params: [{
              k: "active_id",  //必须传
              v: "jfdb",
            },
            {
              k: "user_phone", //必须传
              v: this.$mobile,
            },
            {
              k: "user_ip",  // 必须传
              v: this.$ip,
            },
            {
              k: "goods_name",  // 必须传
              v: e
            }],
          })
        }else{
          this.$refs.share.close()
          this.$toast(res.msg)
        }
      },
      handleReceive(){  ///  领取奖品
        ms.navigateTo({
          target: this.info.jumpUrl
        });
        this.$point({
          action_code:"960000003",//对照表填 必须传
          action_type:"click",//对照表填 必须传
          params: [{
            k: "active_id",  //必须传
            v: "jfdb",
          },
          {
            k: "user_phone", //必须传
            v: this.$mobile,
          },
          {
            k: "user_ip",  // 必须传
            v: this.$ip,
          },
          {
            k: "session_id",  // 必须传
            v: this.info.sessionId
          }],
        })
      },
      async handleMession(e){   ///  点击完成任务
        const headers = {
          sign: this.$sign
        }
        if(e.isFinish == '0'){
          uni.showLoading({
            title:'加载中...'
          })
          const res = await this.$get(`/task/toFinishTask?userPhone=${this.$mobile}&taskId=${e.taskId}`,'','1',headers)
          setTimeout(()=>{
            if(res.code == 200){
              this._getInfo(this.info.sessionId)
              this._getMessionList()
            }
          },750)
          ms.navigateTo({
            target: e.taskUrl
          });
          
          this.$point({
            action_code:"960000005",//对照表填 必须传
            action_type:"click",//对照表填 必须传
            params: [{
              k: "active_id",  //必须传
              v: "jfdb",
            },
            {
              k: "user_phone", //必须传
              v: this.$mobile,
            },
            {
              k: "user_ip",  // 必须传
              v: this.$ip,
            },
            {
              k: "goods_name",  // 必须传
              v: e.taskName
            }],
          })
        }
      },
      handleToHome(e){ //  返回首页
        uni.reLaunch({
          url:'/pages/index/index'
        })
        let code = e==='again'?'960000009':'960000004'
        let params = []
        if(e === 'again'){
          params = [{
            k: "active_id",  //必须传
            v: "jfdb",
          },
          {
            k: "user_phone", //必须传
            v: this.$mobile,
          },
          {
            k: "user_ip",  // 必须传
            v: this.$ip,
          },
          {
            k: "goods_name",  // 必须传
            v: 'continue'
          }]
        }else{
          params = [{
            k: "active_id",  //必须传
            v: "jfdb",
          },
          {
            k: "user_phone", //必须传
            v: this.$mobile,
          },
          {
            k: "user_ip",  // 必须传
            v: this.$ip,
          },
          {
            k: "session_id",  // 必须传
            v: this.info.sessionId
          }]
        }
          
        this.$point({
          action_code:code,//对照表填 必须传
          action_type:"click",//对照表填 必须传
          params
        })
      },
      handleNewUser(){  //   新用户跳转
        uni.reLaunch({
          url:'/pages/index/index'
        })
        this.$point({
          action_code:'960000010',//对照表填 必须传
          action_type:"click",//对照表填 必须传
          params:[{
            k: "active_id",  //必须传
            v: "jfdb",
          },
          {
            k: "user_phone", //必须传
            v: this.$mobile,
          },
          {
            k: "user_ip",  // 必须传
            v: this.$ip,
          },
          {
            k: "goods_name",  // 必须传
            v: 'newUser'
          }]
        })
      },
      handleAdvert(){  ///  点击了广告位
        ms.navigateTo({
          target: 'https://u.10010.cn/qAue4'
        });
        this.$point({
          action_code:"960000008",//对照表填 必须传
          action_type:"click",//对照表填 必须传
          params: [{
            k: "active_id",  //必须传
            v: "jfdb",
          },
          {
            k: "user_phone", //必须传
            v: this.$mobile,
          },
          {
            k: "user_ip",  // 必须传
            v: this.$ip,
          },
          {
            k: "goods_name",  // 必须传
            v: 'banner'
          }],
        })
      },
      //////          network
      async _getInfo(id){ //  请求数据
        const headers = {
          sign: this.$sign
        }
        uni.showLoading({
          title:'加载中...'
        })
        const res = await this.$get(`/sessions/sessionDetail?userPhone=${this.$mobile}&sessionId=${id}`,'',1,headers)
        if(res.code == 200){
          this.info = {...res.data.detailSessionVo,...res.data.showScoreInfo}
          this.codeList = res.data.showCodeList || []
          this.codeNum = this.codeList.length
          this.codeList.push(...new Array(10-this.codeList.length).fill(''))
          this.recordList = res.data.recordList || []
          
        }else{
          this.$toast(res.msg)
        }
      },
      async _getMessionList(){
        const headers = {
          sign: this.$sign
        }
        const res = await this.$get(`/task/taskInfoList?userPhone=${this.$mobile}`,'','',headers)
        if(res.code == 200){
          this.messionList = res.data.taskInfoList
        }
      }
    }
  }
</script>

<style lang="less" scoped>
.goods-detail{
  position: relative;
  font-size: 24rpx;
  .detail-header{
    position: relative;
    .header-rule{
      position: absolute;
      top: 60rpx;
      right: 0;
      width: 40rpx;
      text-align: center;
      border-top-left-radius: 8rpx;
      border-bottom-left-radius: 8rpx;
      padding: 12rpx 0;
      z-index: 100;
      background: rgba(0,0,0,.3);
      color: #fff;
    }
    
    .header-main{
      background: #fff;
      padding: 30rpx;
      padding-bottom: 20rpx;
      margin: -80rpx 30rpx 0;
      border-radius: 30rpx;
      position: relative;
      z-index: 1;
      h2{
        font-size: 36rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span{
          font-size: 30rpx;
          font-weight: 400;
          color: #ccc;
          white-space: nowrap;
        }
      }
      .main-info{
        display: flex;
        align-items: center;
        margin: 30rpx 0;
      }     
      
      .main-footer{
        display: flex;
        align-items: center;
        justify-content: space-between;
        span{
          display: inline-block;
          padding: 6rpx 20rpx;
          color: #d6341e;
          border: .3px solid #d6341e;
          border-radius: 6rpx;
        }
        uni-image{
          width: 160rpx;
        }
      }
    }
    
    .header-award{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .award-info{
        strong{
          display: block;
          color: #d6341e;
          font-weight: 400;
          margin-top: 10rpx;
        }
        span{
          color: #ccc;
          margin-left: 30rpx;
        }
      }
      .award-status{
        width: 130rpx;
      }
      
      button{
        flex-basis: 100%;
        background: #d6341e;
        color: #fff;
        border-radius: 50rpx;
        margin-top: 20rpx;
        line-height: 80rpx;
      }
    }
  }  //  detail-header end
  
  .detail-body{
    margin: 0 30rpx;
    padding-bottom: 60rpx;
    .body-main{
      padding: 30rpx;
      border-radius: 30rpx;
      background: #fff;
      margin-top: 30rpx;
      h2{
        display: flex;
        align-items: center;
        font-size: 30rpx;
        color: #333;
        margin-bottom: 40rpx;
        span{
          margin-left: auto;
          margin-right: 20rpx;
          color: #ccc;
          font-weight: 400;
          font-size: 24rpx;
        }
        strong{
          color: #d6341e;
          font-size: 24rpx;
          font-weight: 400;
        }
      }
      
      .main-info{
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: .3px solid #eee;
        margin-bottom: 30rpx;
        padding-bottom: 40rpx;
        .info-title{
          font-size: 24rpx;
          color: #555;
          line-height: 40rpx;
          view{font-size: 22rpx; color: #ccc;}
          strong{
            color: #d6341e;
            font-weight: 400;
          }
        }
        ::v-deep.uni-numbox{
          font-size: 30rpx;
          font-weight: bold;
          align-items: center;
          .uni-numbox__value{
            background: #fff!important;
          }
          .uni-numbox-btns{
            padding: 0!important;
            background: #fff!important;
            .uni-numbox--text{
              display: block;
              width: 50rpx;
              height: 50rpx;
              text-align: center;
              border-radius: 50%;
              font-size: 44rpx;
              line-height: 50rpx;
              font-weight: bold;
              color: #d6341e!important;
              border: 1px solid #d6341e;
            }
            .uni-numbox--disabled{
              border: 1px solid #eee!important;
              color: #ccc!important;
            }
          }
        }
        button{
          border-radius: 50rpx;
          background: #d6341e;
          color: #fff;
          line-height: 60rpx;
          font-size: 30rpx;
          &.disabled{
            background: #ccc;
            color: #fff;
          }
        }
      }
      
      .main-more{
        border-radius: 50rpx;
        background: #000;
        color: #f7e0bd;
      }
      
      .main-list{
        margin-top: 30rpx;
        border-bottom: .3px solid #eee;
        margin-bottom: 30rpx;
        padding-bottom: 30rpx;
        display: flex;
        .list-item{
          width: 100rpx;
          text-align: center;
          font-size: 20rpx;
          margin-right: 30rpx;
          color: #555;
          &:last-child{
            margin-right: 0;
          }
        }
      }
      .main-mine{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        .mine-item{
          width: 118rpx;
          height: 50rpx;
          background: url('@/static/已获取码.png') no-repeat;
          background-size: contain;
          margin-bottom: 10rpx;
          line-height: 50rpx;
          font-size: 22rpx;
          text-align: center;
          &.not{
            background-image: url('@/static/待获取.png');
          }
          &.reward{
            background-image: url('@/static/中奖的券.png');
          }
        }
      }
      
      .main-award{
        margin-top: 30rpx;
        border-top: .3px solid #eee;
        padding-top: 30rpx;
        .award-user{
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;
          color: #d6341e;
          font-size: 22rpx;
          uni-image{
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
          }
          span{
            color: #555;
            margin-left: 40rpx;
            margin-right: auto;
          }
        }
      }
      
    }
    
    .body-adsense{
      display: flex;
      margin-top: 30rpx;
      border-radius: 30rpx;
      overflow: hidden;
      text-align: center;
    }
  } // .detaill-body end
  
  .detail-fix{
    position: fixed;
    right: 0;
    bottom: 300rpx;
    width: 120rpx;
    height: 120rpx;
  }
  
  .popup-integral{
    position: relative;
    .integral-close{
      position: absolute;
      right: 30rpx;
      top: -50rpx;
      width: 50rpx;
    }
    .integral-head{
      display: flex;
      align-items: center;
      background: url('@/static/背景.png') no-repeat;
      background-size: cover;
      padding: 0 30rpx;
      .head-img{
        width: 200rpx;
        margin-top: -40rpx;
      }
      .head-title{
        color: #ccc;
        font-size: 24rpx;
        margin-right: auto;
        margin-left: 30rpx;
        h2{
          color: #d6341e;
          font-size: 32rpx;
          margin: 0 0 10rpx;
        }
      }
      .head-info{
        display: flex;
        align-items: center;
        margin-right: 30rpx;
        margin-top: 20rpx;
        uni-image{
          width: 40rpx;
          margin-right: 10rpx;
        }
      }
    }
    
    .integral-main{
      background: #fff;
      padding: .5rpx 30rpx;
      max-height: calc(370rpx * 2);
      overflow-y: auto;
      .main-list{
        display: flex;
        padding: 30rpx;
        align-items: center;
        justify-content: flex-start;
        border-radius: 20rpx;
        border: .5px solid #eee;
        uni-image{
          width: 90rpx;
        }
        .list-title{
          color: #ccc;
          font-size: 24rpx;
          margin: 0 auto 0 30rpx;
          h3{
            font-size: 28rpx;
            color: #333;
            margin-bottom: 8rpx;
          }
        }
        button{
          line-height: 55rpx;
          font-size: 28rpx;
          color: #fff;
          background: #d6341e;
          border: 1px solid transparent;
          border-radius: 50rpx;
          padding: 0 20rpx;
          &.success{
            background: #fff;
            color: #d6341e;
            border-color: #d6341e;
          }
        }
      }
    }
  } //  .popup-integral end
  
  .popup-remind{
    text-align: right;
    width: 80vw;
    uni-image{
      width: 60rpx;
    }
    .remind-main{
      background: #fff;
      border-radius: 20rpx;
      text-align: center;
      margin-top: 30rpx;
      padding: 40rpx;
      h2{
        font-size: 30rpx;
        display: block;
        margin-bottom: 40rpx;
      }
      h6{
        margin-bottom: 20rpx;
        color: #999;
        font-weight: 400;
      }
      button{
        line-height: 80rpx;
        border-radius: 50rpx;
        background: #d6341e;
        color: #fff;
        font-size: 36rpx;
      }
    }
  }
  
  .integral-popup{
    text-align: right;
    width: 80vw;
    .main-close{
      width: 60rpx;
    }
    .main-info{
      text-align: center;
      padding: 40rpx;
      border: .5px dashed #efc39b;
      h2{
        margin: 20rpx 0 40rpx;
        color:#fb3d00;
        font-weight: 400;
        font-size: 50rpx;
      }
      span{
        color: #999;
        font-size: 24rpx;
      }
      button{
        background-color: #000;
        color: #ffeed1;
        font-size: 40rpx;
        line-height: 90rpx;
        border-radius: 50rpx;
        margin-top: 30rpx;
      }
    }
  }
  
}
</style>
